﻿@model  List<FTBS.Models.Entities.Film>

<html>
@{
    var searchSchedule = (FTBS.Models.Entities.Concert.SearchSchedule)ViewBag.SearchSchedule;
    var isFirstTimeLoadFilm = false;
    if (ViewBag.IsFirstTimeLoadFilm == null)
    {
        isFirstTimeLoadFilm = true;
    }
    var firstTheaterId = ViewBag.FirstItemTheaterId;
    var firstFilmId = ViewBag.FirstItemFilmId;
}
<body>
    <div class="grid">
        @foreach (var film in Model)
        {
            <div class="row">
                <div class="span5">
                    <div class="listview">
                        @if (Model.IndexOf(film) == 0)
                        {
                            <a href="#" class="list selected" id="filmItem @film.FilmId"  onclick="ChangeTypeFilm(@film.FilmId)">
                                <div class="list-content" onclick="loadShowTimeByFilmId(@film.FilmId,  @searchSchedule.TheaterId)">
                                    <img src="~/Image/FilmImage/@film.ImageURL" class="icon" />
                                    <div class="data">
                                        <span class="list-title" style="font-weight: bold; font-size: 14px">@film.Name</span>
                                        <button class="button mini danger">@film.Format.FormatName</button>
                                    </div>
                                </div>
                            </a>
                        }
                        else
                        {
                            <a href="#" class="list" id="filmItem @film.FilmId"  onclick="ChangeTypeFilm(@film.FilmId)">
                                <div class="list-content" onclick="loadShowTimeByFilmId(@film.FilmId,  @searchSchedule.TheaterId)">
                                    <img src="~/Image/FilmImage/@film.ImageURL" class="icon" />
                                    <div class="data">
                                        <span class="list-title" style="font-weight: bold; font-size: 14px">@film.Name</span>
                                        <button class="button mini danger">@film.Format.FormatName</button>
                                    </div>
                                </div>
                            </a>
                        }
                        
                    </div>
                </div>
            </div>
        }
    </div>
</body>
</html>

<script>
    function ChangeTypeFilm(filmId) {
        var idTag = "filmItem" + " " + filmId;
        document.getElementById(filmId)
        var classValue = document.getElementById(idTag).getAttribute("class");

        if (classValue == "list selected") {
            document.getElementById(idTag).setAttribute("class", "list selected");
        }
        else {
            $("a[id^='filmItem']").attr('class', 'list');
            document.getElementById(idTag).setAttribute("class", "list selected");
        }
    }

    $(document).ready(function () {
        var firstItemTheaterId = @firstTheaterId;
        var firstItemFilmId = @firstFilmId;
        loadShowTimeByFilmId(firstItemFilmId, firstItemTheaterId);
    });
</script>




